<template lang="html">
  <div class="snipper">
    <div class="spinnerWrapper">
      <div class="spinner_bounce1"></div>
      <div class="spinner_bounce2"></div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.snipper {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  z-index: 1;
}
.spinnerWrapper{
  position: relative;
  margin: 30px auto;
  width: 28px;
  height: 28px;
}
.spinner_bounce1,
.spinner_bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.6;
    position: absolute;
    background-color: deepskyblue;
    top: 0;
    left: 0;
    animation: kebab-spinner-double-bounce 2.0s infinite ease-in-out;
}
.spinner_bounce2 {
   animation-delay: -1.0s;
}
@keyframes kebab-spinner-double-bounce {
   0%, 100% {
     transform: scale(0.0);
   }
   50% {
     transform: scale(1.0);
   }
 }
</style>
